<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner" /> -->

    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <!-- <div id="chart-btm"></div> -->

    <!-- <el-row style="background:#fff;height:300px; padding:16px 16px 0;margin-bottom:32px;">
      <div id="echart-cen"></div>
    </el-row> -->

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div id="chart1"></div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div id="chart2"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import { selectClassifyUse1,selectClassifyUse2 } from '@/api/home'
const echarts = require("echarts");

const y2Data1 = ['323','231','123','421','133'],
      y2Data2 = ['223','164','289','308','167']

export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
  },
  data() {
    return {

    };
  },
  mounted() {
    this.getClassify1()
    this.getClassify2()
    window.addEventListener("resize", () => {
      const myChart = echarts.init(document.getElementById("chart-btm"));
      const myChart1 = echarts.init(document.getElementById("chart-btm1"));
      myChart.resize();
      myChart1.resize();
    });
    this.$nextTick(() => {
      // this.drawOne()
      this.drawTwo()
      this.drawBtm(y2Data1,y2Data2)
    })
  },
  methods: {
    /**
     * 获取分类使用情况1
     */
    getClassify1(){
      selectClassifyUse1().then(res => {
        console.log('分类使用情况1',res)
        let classifData = [],names = [],nums = [];
        for(let key in res.data){
          console.log(key)
          //累加每项资金
          let money = res.data[key].reduce((total,current) => {
            // console.log(current)
            return total+current.jine*1
            console.log(total)
          },0) 
          //累加每项数值
          let sumNum = res.data[key].reduce((total,current) => {
            // console.log(current)
            return total+current.nums*1
            console.log(total)
          },0) 
          // console.log('sum',sum)
          //重组数据结构名字数组
          names.push(key)   
          //重组数据结构数值数组
          nums.push({
            name: key,
            value: sumNum
          }) 
          //重组数据结构资金数据数组
          classifData.push({
            name: key,
            value: money
          })
        }
        this.drawOne(names,classifData)
        this.drawTwo(names,nums)
      })
    },
    /**
     * 获取分类使用情况1
     */
    getClassify2(){
      selectClassifyUse2().then(res => {
        console.log('分类使用情况2',res)
      })
    },
    handleSetLineChartData(url) {
      console.log(url);
      this.$router.push({
        name: url,
      });
    },
    // 绘制底部
    drawOne(names,datas) {
      console.log("绘制第一块echart");
      const myChartbtm = echarts.init(document.getElementById("chart1"));
      console.log(myChartbtm)
      myChartbtm.setOption({
        title: {
          text: "资产分类金额占比",
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: names,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawTwo(names,datas) {
      console.log("绘制第二块echart");
      const myChartbtm = echarts.init(document.getElementById("chart2"));
      console.log(myChartbtm)
      myChartbtm.setOption({
        title: {
          text: "资产分类数量占比",
          left: "left",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: names,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: datas,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawBtm(y2Data1, y2Data2) {
      console.log("第二块echart");
      const myChartbtm = echarts.init(document.getElementById("echart-cen"));
      myChartbtm.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#081E3F"
            }
          }
        },
        /**
         * 可视化图位置
         */
        grid: {
          left: 40,
          top: 50,
          right: 10,
          bottom: 40,
          borderWidth: 1
        },
        /**
         * 标题显示
         */
        legend: {
          data: ["亚健康", "故障"],
          left: "85%",
          textStyle: {
            color: "#333"
          }
        },
        /**
         * x轴数据显示
         */
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#18a05e"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333"
            },
            formatter: params => {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 10;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              for (let row = 0; row < rowNumber; row++) {
                newParamsName +=
                  params.substring(
                    row * provideNumber,
                    (row + 1) * provideNumber
                  ) + "\n";
              }
              return newParamsName;
            }
          },
          data: ['111','222','333','444','555']
        },
        /**
         * y轴坐标线，坐标值显示
         */
        yAxis: {
          type: "value",
          boundaryGap: true,
          splitLine: {
            show: true, // 网格线是否显示
            //  改变样式
            lineStyle: {
              color: "rgba(24,160,94,0.15)", // 修改网格线颜色
              type: "solid" //网格线的类型
              //width: 1,
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#18a05e"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333"
            }
          },
          data: ["0", "100", "200", "400"]
        },
        /**
         * y轴数值显示
         */
        series: [
          {
            name: "亚健康",
            data: y2Data1,
            type: "line",
            color: "#F8AC59",
            symbolSize: 10,
            smooth: false, //关键点，为true是不支持虚线的，实线就用true
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dashed"
                }
              }
            }
          },
          {
            name: "故障",
            data: y2Data2,
            type: "line",
            symbol: "rect",
            symbolSize: 10,
            itemStyle: {
              color: "#FF6383"
            }
          }
        ]
      });
    }
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    height: 400px;
    padding: 16px 16px 0;
    margin-bottom: 20px;
    border-radius: 5px;
  }
}
#chart1,#chart2,#echart-cen{
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
